<style type="text/css">
    .position_item{
        margin-bottom:25px;
        cursor:default;
        transition: 0.5s;
    }
    .position_item:hover{
        transform: scale(1.05);
    }
</style>
<div id="position_list"></div>

<script src="https://res.dcdev.net/dcdev/v1.0.8/assets/js/render_somthing.js"></script>

<script>
    // 记录是否首次改变样式及状态，如果是则undo之后再执行样式修改
    var position_list;
    position_list = new render_somthing();
    position_list.init({
        // div的id
        id: "#position_list",
        // x/y/flow   分别为x向滚动、y向滚动、瀑布流
        method: "y",
        // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
        container: {
            html: `
<div style="margin-left:10px;margin-top:60px;"></div>
`
        },
        // 渲染内容的配置
        content: {
            default: `
<div class="position_item" data-key="type" style="">
    <div style="font-size:15px;">#{type}</div>
    <div style="color:gray;font-size:12px;">#{desc}</div>
</div>
`,
        },
        callback: {
            click: function (res) {
                if (res.key == "type") {
                    var content;
                    content = get_selected_content();
                    switch (res.value.type) {
                        case "竖排居中":
                            insert_to_editor(
                                `\n<!-- ${res.value.type} -->\n<div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">\n${content}\n</div>\n`
                            )
                            break;
                        case "全屏居中":
                            insert_to_editor(
                                `\n<!-- ${res.value.type} -->\n<div style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)">${content}</div>\n`
                            )
                            break;
                        case "固定右下":
                            insert_to_editor(
                                `\n<!-- ${res.value.type} -->\n<div style="position:absolute;bottom:30px;right:10px;">\n${content}\n</div>\n`
                            )
                            break;
                        case "固定最顶":
                            insert_to_editor(
                                `\n<!-- ${res.value.type} -->\n<div style="position:absolute;top:0px;left:0px;">\n${content}\n</div>\n`
                            )
                            break;
                        case "固定最底":
                            insert_to_editor(
                                `\n<!-- ${res.value.type} -->\n<div style="position:absolute;bottom:0px;left:0px;">\n${content}\n</div>\n`
                            )
                            break;
                        case "禁止拖动":
                            var temp = `
<style>
    html {
        height: 100%;
    }

    body {
        overflow: hidden;
        height: 100%;
    }
</style>
<!-- 微信内拖动不显示网址，所有元素写在里面此div里 -->
<div style="height: 100%;overflow: auto;position: inherit;">

</div>
`

                            insert_to_editor(temp)
                            break;
                        default:
                            break;
                    }

                }
            }
        },
    });
    var data = [{
            type: "竖排居中",
            desc: "多个元素竖排之后居中."
        },
        {
            type: "全屏居中",
            desc: "固定到全页面的中间，不受其它div影响."
        },
        {
            type: "固定右下",
            desc: "固定到页面右下角，通常用于回到顶部按钮等."
        },
        {
            type: "固定最顶",
            desc: "固定到页面最顶部."
        },
        {
            type: "固定最底",
            desc: "固定到页面最底部."
        },
        {
            type: "禁止拖动",
            desc: "移动端向下拖动时不显示网页地址."
        },
    ]
    position_list.render(data);
</script>